<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>岭南醒狮之旅</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.container {
				max-width: 98%;
				position: relative;
				margin: 0 auto;
				text-align: center;
				height: 100vh;
				/*将容器高度设置为浏览器视窗高度的100%*/
				overflow: hidden;
			}
			
			.bg {
				position: relative;
				margin: auto;
				width: fit-content;
				overflow: hidden;
			}
			
			.bgimg {
				max-width: 100%;
				/*最大宽度为100%*/
				max-height: 100%;
				/*最大高度为100%*/
				height: 100vh;
			}
			.shizi {
				position: absolute;
    			width: 39%;
    			left: 30%;
    			transform: translate(-50%, 0);
    			bottom: 18%;
    			z-index: 2;
			}
			
			#lingnan {
				position: absolute;
				width: 48%;
				left: 68%;
				transform: translate(-50%, 0);
				bottom: -20%;
				z-index: 2;
				transition: all 1s ease;
			}
			
			#xingshi {
				position: absolute;
				width: 56%;
				left: 69.8%;
				transform: translate(-50%, 0%);
				bottom: -20%;
				z-index: 3;
				transition: all 1s ease;
			}
			
			#zhilv {
				position: absolute;
				width: 43%;
				left: 71%;
				transform: translate(-50%, 0%);
				bottom: -20%;
				z-index: 4;
				transition: all 1s ease;
			}
			
			.gu {
				position: absolute;
				width: 30%;
				left: 55%;
				transform: translate(-50%, 0%);
				bottom: 12%;
				z-index: 3;
			}
			#guguang {
				position: absolute;
				width: 37%;
				left: 54.5%;
				transform: translate(-50%, 0%);
				bottom: 10.5%;
				z-index: 2;
				animation: guang 1s linear infinite;
			}
			@keyframes guang {
				25%{opacity: 0.5;}
				50%{opacity: 0.1;}
				75%{opacity: 0.5;}
				100%{opacity: 0.9;}
            }
            .gu {
				position: absolute;
				width: 30%;
				left: 55%;
				transform: translate(-50%, 0%);
				bottom: 12%;
				z-index: 3;
			}
			
		</style>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
		window.onload = move;
		function move(){
			document.getElementById("lingnan").style.bottom="55%";
			document.getElementById("xingshi").style.bottom="37%";
			document.getElementById("zhilv").style.bottom="24%";
		}
		$(document).ready(function() {
            $('.gu').on('mouseenter', function() {
                $(this).css('transform', 'scale(1.5)');
            }).on('mouseleave', function() {
                $(this).css('transform', 'scale(1)');
            });
        });
	</script>
	</head>

	<body>
		<div class="container">
			<div class="bg">
				<img class="shizi" src="res/shizi.png" />
				<img class="bgimg" src="res/beijing.png" />
		        <img id="lingnan" src="res/lingnan.png" />
		        <img id="xingshi" src="res/xingshi.png" />
	    	    <img id="zhilv" src="res/zhilv.png" />
	    	    <img class="gu" src="res/gu.png" />
	    	    <img id="guguang" src="res/guguang.png" />
			</div>
		</div>
		
	</body>

</html>